
<template>
  <div class="container">
    <div >
      <my-card title="账号列表">
        <template slot>
          <div class="enterprise-user-page">
            <div class="top-search-box">
              <div class="top-from-box">
                <el-form
                  :inline="true"
                  :model="pageParams"
                  class="form-inline"
                  ref="ruleForm"
                >
                  <el-form-item label="用户名:" prop="user">
                    <el-input
                      v-model="pageParams.account"
                      placeholder="请输入搜索用户名"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="角色:" prop="region">
                    <el-select
                      v-model="pageParams.role"
                      placeholder="请选择角色类型"
                    >
                      <el-option
                        v-for="(item, index) in options"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="hkGetList">查询</el-button>
                    <el-button type="primary" @click="resetForm">重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div class="add-new-box">
                <el-button type="primary" @click="hkClickAdd">新建用户</el-button>
              </div>
            </div>
            <div class="table-box"></div>
            <el-table
              :data="tableList"
              style="width: 100%"
              header-cell-class-name="header-cell-class-name"
              stripe
              border
            >
              <el-table-column prop="coding" label="编号" align="center">
              </el-table-column>
              <el-table-column prop="role" label="角色" align="center">
                <template slot-scope="{ row }">
                  <div>
                    {{ row.role | filtersRoleName }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="account" label="用户名" align="center">
              </el-table-column>

              <el-table-column prop="phone" label="手机号" align="center">
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" align="center">
                <template slot-scope="{ row }">
                  <div>
                    {{ row.createTime | filtersTimes }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="loginTime"
                label="最近登录时间"
                align="center"
              >
                <template slot-scope="{ row }">
                  <div>
                    {{ row.loginTime | filtersTimes }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="{ row }">
                  <el-button type="primary" size="small" @click="hkClickEdit(row)"
                  >编辑</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination-box">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageParams.page"
                :page-sizes="[20, 50, 100]"
                :page-size="pageParams.count"
                :total="total"
                layout=" prev, pager, next,sizes,jumper"
              >
              </el-pagination>
            </div>
          </div>
        </template>
      </my-card>
    </div>
  </div>

</template>

<script>
import MyCard from "@/components/my-card/index";
import { hkGet } from "@/api/http";
import { httpApi } from "@/api/api";
import { hkGetTimeFmt, accoutnRoles } from "@/utils/tools";


const options = [{ label: "请选择角色类型", value: "" }, ...accoutnRoles];
export default {
  components: {MyCard },
  props: {},
  data() {
    return {
      total: 0,
      pageParams: {
        page: 1,
        direction: 0,
        count: 20,
        account: "",
        role: "",
        companyName: ""
      },
      options: options,
      tableList: []
    };
  },
  watch: {},
  computed: {},
  filters: {
    filtersRoleName(val) {
      return (
        options.find(item => {
          return item.value == val;
        }).label || "未知"
      );
    },
    filtersTimes(val) {
      return hkGetTimeFmt(val);
    }
  },
  methods: {
    hkClickAdd() {
      this.$router.push("/account/ent/add");
    },
    hkClickEdit(item) {
      let info = encodeURIComponent(JSON.stringify(item));
      let path = "/account/ent/editUser";
      if (item.role === 2) {
        path = "/account/ent/editEnt";
      }
      this.$router.push({
        path: path,
        query: { info: info }
      });
    },
    resetForm() {
      (this.pageParams = {
        page: 1,
        direction: 0,
        count: 20,
        account: "",
        role: "",
        companyName: ""
      }),
        this.$refs.ruleForm.resetFields();
    },
    hkGetList() {
      hkGet(httpApi.userLsit, this.pageParams).then(({ data }) => {
          this.total = data.total;
          this.tableList = data.data;
        })
        .catch(err => {

        });
    },
    handleSizeChange() {},
    handleCurrentChange() {}
  },
  created() {},
  mounted() {
    this.hkGetList();
  }
};
</script>
<style lang="scss" scoped>
::v-deep .header-cell-class-name {
  background: #ecf0f3;
}
.table-box {
  margin-top: 30px;
}
</style>
